<template>
    <div class="app-container">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getAlipayRecList">刷新</el-button>
        <el-button type="primary" size="mini" @click="flipUp">上翻</el-button>

        <el-table height="750" v-loading="main.loading" :data="main.alipayRecList" style="width: 100%;margin-top: 10px;">
            <el-table-column label="日期" width="160px">
                <template slot-scope="scope">
                    {{ formattedDate(scope.row.fullDate) }}
                </template>
            </el-table-column>

            <el-table-column label="支付金额" prop="paymentPrice" />
            <el-table-column label="返款金额" prop="refundPrice" />
            <el-table-column label="支付宝转入金额">
                <template slot-scope="scope">
                    <span style="color: #1890ff;cursor: pointer;" @click="openAlipayPriceIn(scope.row)">{{
                        scope.row.inPrice }}</span>
                </template>
            </el-table-column>
            <el-table-column label="计算对账金额" prop="sealPrice" />
            <el-table-column label="手动对账金额">
                <template slot-scope="scope">
                    <span style="color: #1890ff;cursor: pointer;" @click="openAlipayManualPrice(scope.row)">{{
                        scope.row.manualPrice }}</span>
                </template>
            </el-table-column>
            <el-table-column label="对账状态">
                <template slot-scope="scope">
                    <el-tag type="danger" style="cursor: pointer;" v-if="scope.row.sealStatus === 1"
                        @click="cancelSeal(scope.row)"> <i class="el-icon-lock"></i>已对账</el-tag>
                    <el-button v-if="scope.row.sealStatus === 2" size="mini" type="text"
                        @click="confirmSeal(scope.row)">确认对账</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog title="修改微信转入金额" :visible.sync="alipayPriceIn.isShow" width="700px" append-to-body>
            <el-form ref="alipayPriceInForm" :rules="alipayPriceIn.rules" :model="alipayPriceIn.form">
                <el-form-item prop="inPrice" label="微信转入金额">
                    <el-input-number v-model="alipayPriceIn.form.inPrice"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postAlipayPriceIn">确
                    定</el-button>
                <el-button @click="closeAlipayPriceIn">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改手动对账金额" :visible.sync="alipayManualPrice.isShow" width="700px" append-to-body>
            <el-form ref="alipayManualPriceForm" :rules="alipayManualPrice.rules" :model="alipayManualPrice.form">
                <el-form-item prop="manualPrice" label="手动对账金额">
                    <el-input-number v-model="alipayManualPrice.form.manualPrice" :min="0"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postAlipayManualPrice">确
                    定</el-button>
                <el-button @click="closeAlipayManualPrice">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getAlipayRecList, postEditAlipayRec, postCancelSeal, postConfirmSeal } from "@/api/hotel/orderRegisterAlipayRec";
import { getFormattedDate } from "@/utils/timing-order";

export default {
    name: 'AlipayRec',
    data() {
        return {
            main: {
                loading: false,
                showSearch: true,
                queryParams: {
                    maxDate: undefined,
                    isFlipUp: false
                },
                alipayRecList: [],
            },
            alipayPriceIn: {
                isShow: false,
                form: {
                    fullDate: undefined,
                    inPrice: undefined
                },
                rules: {
                    inPrice: [
                        { required: true, message: "请输入微信转入金额", trigger: "blur" },
                    ]
                }
            },
            alipayManualPrice: {
                isShow: false,
                form: {
                    fullDate: undefined,
                    manualPrice: undefined
                },
                rules: {
                    manualPrice: [
                        { required: true, message: "请输入手动对账金额", trigger: "blur" },
                    ]
                }
            }
        }
    },
    created() {
        this.main.queryParams.maxDate = getFormattedDate();
        this.getAlipayRecList();
    },
    methods: {
        getAlipayRecList() {
            this.main.queryParams.maxDate = getFormattedDate();
            this.main.queryParams.isFlipUp = false;
            this.main.loading = true;
            getAlipayRecList(this.main.queryParams).then(response => {
                if (response.data.length > 0) {
                    this.main.queryParams.maxDate = response.data[0].fullDate.replace("T00:00:00", "");
                }
                this.main.alipayRecList = response.data;
                this.main.loading = false;
            }
            );
        },
        flipUp() {
            this.main.queryParams.isFlipUp = true;
            this.main.loading = true;
            getAlipayRecList(this.main.queryParams).then(response => {
                if (response.data.length > 0) {
                    this.main.queryParams.maxDate = response.data[0].fullDate.replace("T00:00:00", "");
                    this.main.alipayRecList = response.data.concat(this.main.alipayRecList);
                } else {
                    this.$message('无数据！');
                }
                this.main.loading = false;
            }
            );
        },
        openAlipayPriceIn(row) {
            this.alipayPriceIn.form.fullDate = row.fullDate;
            this.alipayPriceIn.form.inPrice = row.inPrice;
            this.alipayPriceIn.isShow = true;
        },
        postAlipayPriceIn() {
            this.$refs["alipayPriceInForm"].validate(valid => {
                if (valid) {
                    this.postEditAlipayRec(this.alipayPriceIn.form);
                }
            })
        },
        closeAlipayPriceIn() {
            this.alipayPriceIn.form.fullDate = undefined;
            this.alipayPriceIn.form.inPrice = undefined;
            this.alipayPriceIn.isShow = false;
        },

        openAlipayManualPrice(row) {
            this.alipayManualPrice.form.fullDate = row.fullDate;
            this.alipayManualPrice.form.manualPrice = row.manualPrice;
            this.alipayManualPrice.isShow = true;
        },
        postAlipayManualPrice() {
            this.$refs["alipayManualPriceForm"].validate(valid => {
                if (valid) {
                    this.postEditAlipayRec(this.alipayManualPrice.form);
                }
            })
        },
        closeAlipayManualPrice() {
            this.alipayManualPrice.form.fullDate = undefined;
            this.alipayManualPrice.form.inPrice = undefined;
            this.alipayManualPrice.isShow = false;
        },

        postEditAlipayRec(form) {
            postEditAlipayRec(form).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("操作成功");
                    this.alipayPriceIn.isShow = false;
                    this.alipayManualPrice.isShow = false;
                    this.getAlipayRecList();
                }
            });
        },

        cancelSeal(row) {
            this.$modal.confirm('确定取消对账吗?').then(function () {
                return postCancelSeal(row);
            }).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("操作成功");
                    this.getAlipayRecList();
                }
            })
        },

        confirmSeal(row) {
            this.$modal.confirm('确定对账吗?').then(function () {
                return postConfirmSeal(row);
            }).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("操作成功");
                    this.getAlipayRecList();
                }
            })
        }

    },
    computed: {
        formattedDate() {
            return function (date) {
                if (date) {
                    return date.replace(/T/g, ' ').replace(' 00:00:00', '').trim();
                } else {
                    return null;
                }
            };
        }
    }
}
</script>

<style></style>